<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <el-col :span="5" :offset="0">
                    <el-form-item label="真实姓名">
                        <el-input v-model="searchForm.realName" placeholder="真实姓名" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="手机号">
                        <el-input v-model="searchForm.phone" placeholder="手机号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="14">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData(1)">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">

            <el-table-column label="真实姓名" width="100" align="center">
                <template #default="{ row }">
                    {{ row.realName }}
                </template>
            </el-table-column>

            <el-table-column label="手机号" align="center">
                <template #default="{ row }">
                    {{ row.phone }}
                </template>
            </el-table-column>

            <el-table-column label="邮箱" align="center" width="230">
                <template #default="{ row }">
                    {{ row.email }}
                </template>
            </el-table-column>

            <el-table-column label="性别" width="80" align="center">
                <template #default="{ row }">
                    {{ transferSex(row.sex) }}
                </template>
            </el-table-column>

            <el-table-column label="所属角色" align="center">
                <template #default="{ row }">
                    {{ formatRoleName(row.roleId) }}
                </template>
            </el-table-column>

            <el-table-column label="状态" width="80" align="center">
                <template #default="{ row }">
                    {{ transferWxUser_dailyState(row.dailyState) }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.createTime) }}
                </template>
            </el-table-column>


            <el-table-column label="操作" width="100" align="center">
                <template #default="scope">
                    <el-popconfirm :title="showPopTitle(scope.row.id)" confirmButtonText="确认" cancelButtonText="取消"
                        @confirm="submitAssign(scope.row)">
                        <template #reference>
                            <el-button type="primary" size="small" text>{{ showBtnName(scope.row.id) }}</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from "vue"
import {
    api_user_list,
} from "~/api/userApi.js"
import { transferSex, dateFormatter, transferWxUser_dailyState } from '~/utils/common.js'
import { isDeveloper } from '~/utils/userInfo.js'
import { getRoleList } from "~/api/role";
import { api_orders_dispatch } from "~/api/ordersApi";
import { toast } from '~/composables/util'


const props = defineProps({
    assignProps: Object,
})

// table数据
const tableData = ref([])
const loading = ref(false)
const roles = ref([])
//是否是开发者账号
const developer = ref(false)

// 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const assignedUserId = ref([])

// 查询条件
const searchForm = reactive({
    realName: "",
    phone: "",
    page: currentPage.value,
    size: limit.value,
    roleId: 4,
})


// 生命周期
onMounted(() => {
    //判断是否是开发者账号登录
    if (isDeveloper()) {
        developer.value = true
    }

    //初始化角色字典数据
    getRoleList().then(res => {
        if (res) {
            roles.value = res.records
        }
    })
    //初始化列表数据
    getData()

    assignedUserId.value = props.assignProps?.engineerDtos.map(x => x.id)
})

watch(
    () => props.assignProps,
    (newProps) => {
        console.log('assgin order info: ', newProps)
        assignedUserId.value = newProps.engineerDtos.map(x => x.id)
    }
)


// 获取数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }

    loading.value = true
    searchForm.page = currentPage.value
    api_user_list(searchForm)
        .then(res => {
            //console.log(res.records)
            if (res) {
                tableData.value = res.records
                total.value = res.total
            } else {
                tableData.value = []
                total.value = 0
            }
        })
        .finally(() => {
            loading.value = false
        })
}

//角色字典数据，数据转换方法
const formatRoleName = (roleId) => {
    //console.log(roles)
    return roles.value.find(x => x.id == roleId)?.description || roleId
}

// 派单
function submitAssign(row) {
    console.log("align user ids : ", assignedUserId?.value)
    let index = assignedUserId?.value.findIndex(x => x == row.id)
    console.log('index', index)
    if (index != -1) {
        assignedUserId.value.splice(index, 1)
    } else {
        assignedUserId.value.push(row.id)
    }

    let reqParams = {
        orderId: props.assignProps.orderDto.orderId,
        engineerIds: assignedUserId.value.length == 0 ? null : [...assignedUserId.value]
    }
    api_orders_dispatch(reqParams)
        .then(res => {
            console.log('dispatch res: ', res)
            toast('操作成功', 'success')
            assignedUserId.value = res.engineerDtos.map(x => x.id)
            getData()
        })
}

// 重置搜索框
const resetSearchForm = () => {
    searchForm.realName = ""
    searchForm.phone = ""
    getData()
}

// 展示 已分配 还是 派发
const showBtnName = (id) => {
    let index = assignedUserId?.value?.findIndex(x => x == id)
    return index != -1 ? '已分配' : '派发'
}
// 展示 取消 还是 派发
const showPopTitle = (id) => {
    let index = assignedUserId?.value?.findIndex(x => x == id)
    return index != -1 ? '取消指派工程师?' : '派发工程师?'
}


</script>
